var getdata = '',
    pictype = 0;
var date = new Date;
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = (month < 10 ? "0" + month : month);
var mydate = (year.toString() + "-" + month.toString());
getdata = mydate;
laydate.render({
    elem: '#yearselect',
    type: 'month',
    value: mydate,
    max: mydate,
    done: function(value, date) {
        getdata = value;
        getLineData();
        // alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
    }
});
var myChart = echarts.init(document.getElementById('echartsBox'));
var lineChart = echarts.init(document.getElementById('echartsBoxline'));
var giftImageUrl = "/img/chongdianzhuang-4.png"
function gettotaldata() {
    $.ajax({
        type: "POST",
        url: "/business/sysView/getCountAll",
        success: function(data) {
            $(".zdnum").text(data.station.STATION_COUNT); //
            $(".normalNum").text(data.station.STATION_COUNT_OFFLINE);
            $(".faultNum").text(data.station.STATION_COUNT_ONLINE);

            $(".cdztotal").text(data.stake.GUN_COUNT);
            $(".cdzdNum").text(data.stake.CHARGE_COUNT);
            $(".cdznum").text(data.stake.GUN_COUNT-data.stake.CHARGE_COUNT);

            $(".totalDl").text(data.sumCharge.ALL_SUM);
            $(".dayDlNum").text(data.sumCharge.DAY_SUM);
            $(".monthDlnum").text(data.sumCharge.MON_SUM);

            $(".totalCdJe").text(data.sumPayNumber.ALL_SUM);
            $(".dayje").text(data.sumPayNumber.DAY_SUM);
            $(".monthJe").text(data.sumPayNumber.MON_SUM);
        },
        error: function(e) {
            console.log(e);
        }
    });
}
$(".realstateBtn").on("click",function(){
    $(".realstateBtn").removeClass("active");
    $(this).addClass("active");
    pictype=$(this).data("type");
    getPicData();
})

function getPicData() {
    $.ajax({
        type: "POST",
        url: "/business/sysView/getRealState",
        data: { type: pictype },
        success: function(data) {
            picEcart(data)
            //STAKE_COUNT//总数量
        },
        error: function(e) {
            console.log(e);
        }
    });
}
function getLineData() {
    $.ajax({
        type: "get",
        url: "/business/sysView/getSumAll",
        data: {
            day: getdata,
        },
        success: function(data) {
            if (data.length > 0) {
                lineEcart(data)
            } else {
                layer.msg("本月没有数据");
            }
        },
        error: function(e) {
            console.log(e);
        }
    });
}
function lineEcart(linedata) {
    var color = ['rgba(34, 181, 115, 1)', 'rgba(248, 181, 81, 1)'];
    var lineY = [];
    var eacrtDa = {
        dayArr: [],
        dnArr: [],
        pnArr: []
    };
    linedata.forEach(function(item, index) {
        eacrtDa.dayArr.push(item.DAY);
        eacrtDa.dnArr.push(item.DN_SUM);
        eacrtDa.pnArr.push(item.PN_SUM);
    });
    var charts = {
        name: ["充电量", "充电金额"],
        lineX: eacrtDa.dayArr,
        value: [
            eacrtDa.dnArr,
            eacrtDa.pnArr
        ]
    }
    for (var i = 0; i < charts.name.length; i++) {
        var x = i
        if (x > color.length - 1) {
            x = color.length - 1
        }
        var data = {
            name: charts.name[i],
            type: 'line',
            color: color[x],
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            data: charts.value[i],
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 2,
                }
            },
        }
        lineY.push(data)
    }
    var optionline = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '5%',
            left: '4%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: charts.lineX,
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#B2B3B8',
                    width: "0"
                },
                interval:0,
                rotate:60,
                formatter: function(params) {
                    return params
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#B2B3B8'
                }
            }
        },
        yAxis: {
            name: charts.unit,
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#B2B3B8'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#ECEDF2',
                    type: 'dashed'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: 'rgb(0,253,255,0.6)'
                }
            }
        },
        series: lineY
    }
    lineChart.setOption(optionline);
}
function picEcart(picdata) {
    console.log(picdata,120)
    // $(".zlgsNum").text(picdata.ZL_COUNT);
    // $(".zlgsB").width(parseFloat(picdata.ZL_COUNT_P)-12+"%");
    // $(".jlgsB").width(parseFloat(picdata.JL_COUNT_p)-12+"%");
    // $(".zlgsZb").text("占比"+picdata.ZL_COUNT_P);
    // $(".jlgsnum").text(picdata.JL_COUNT);
    // $(".jlgsZb").text("占比"+picdata.JL_COUNT_P);
    // if(parseFloat(picdata.ZL_COUNT)<=0){
    //     $(".zlgsB").hide();
    // }else{
    //     $(".zlgsB").show();
    // }
    // if(parseFloat(picdata.JL_COUNT)<=0){
    //     $(".jlgsB").hide();
    // }else{
    //     $(".jlgsB").show();   
    // }
    var chartName = ['离线', '在线'];
    var chartData = [picdata.STAKE_COUNT-picdata.STAKE_COUNT_ONLINE ,picdata.STAKE_COUNT_ONLINE ];
    var data = []
    var legendName = [];
    var terminalNum = picdata.STAKE_COUNT;
    for (var i = 0; i < chartData.length; i++) {
        var c = {
            value: chartData[i],
            name: chartName[i]
        }
        data[i] = c;
        legendName[i] = chartName[i];
    }
    option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {d}% "
        },
        graphic: {
            elements: [{
                type: 'image',
                style: {
                    image: giftImageUrl,
                    width: 20,
                    height: 20
                },
                left: '43%',
                top: '30%'
            }]
        },
        title: {
            text: terminalNum,
            left: '45%',
            top: '35%',
            padding: [24, 0],
            textAlign: "center",
            textStyle: {
                color: '#00C484',
                fontSize: 18,
                align: 'center',
                width: "100%",
            },
            subtext: "充电桩",
            subtextStyle: {
                "fontSize": 12,
                "color": '#888'
            }
        },
        legend: {
            orient: 'vertical',
            x: '75%',
            y: 'center',
            itemWidth: 8,
            itemHeight: 8,
            itemRadius: 8,
            icon: 'circle',
            align: 'left',
            textStyle: {
                fontSize: 14,
                color: '#666',
            },
            data: legendName
        },
        series: [{
            type: 'pie',
            radius: ['57%', '80%'],
            center: ['45%', '52%'],
            color: [ '#C2F3DA', '#00C484','#F8B551'],
            data: data,
            label: {
                normal: {
                    show: true,
                    formatter: "{b}{c}个  {d}%",
                    color:"#00C484",
                    fontSize:12
                }
            },
            labelLine: {
                normal: {
                    show: true,
                    smooth:false,
                    length: 10,
                    length2: 10,
                    lineStyle: {
                        color: 'rgba(191,191,191,1)',
                        width: 1
                    },
                },
            },
        }]
    };
    myChart.setOption(option);
}
getPicData();//获取柱状图数据
getLineData();//获取折线图数据
gettotaldata();//获取统计数据
setInterval(function(){
    getPicData();//获取柱状图数据
    getLineData();//获取折线图数据
    gettotaldata();//获
},30000)